<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>点击列表项，列表项变红</title>
  <style>
    .action {
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <h2>点击列表列表项变色</h2>
  <!--  实现了列表项点击哪个哪个变红，其他的恢复原色-->
  <p>方案1：</p>
  <li v-for="(item,index) in movies" v-on:click="btnClick(item,index)" v-bind:id="index">{{index}}-{{item}}</li>
  <hr>

  <p>方案2：</p>
  <li v-for="(item,index) in movies2" v-on:click="btnClick2(item,index)" :class="{action:index === CurrentIndex}">
    {{index}}-{{item}}
  </li>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "vue app",
      movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],
      movies2: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],
      CurrentIndex: -1
    },
    methods: {
      btnClick: function (item, index) {
        this.movies.forEach(function (value, indexedKey) {
          let obj = document.getElementById("" + indexedKey + "");
          if (index === indexedKey) {
            obj.setAttribute("class", "action")
          } else {
            obj.setAttribute("class", "")
          }
        })
      },
      btnClick2(item, index) {
        this.CurrentIndex = index
      }
    }
  });
</script>
</body>
</html>